<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>angular table</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../src/ourpalm-table.css">
</head>
<body>

<div class="container" ng-controller="DemoController as vm">
    <h1>hello angular ourpalm-table！</h1>
    <h2>展示全部配置！</h2>

    <table ourpalm-table="vm.table"
           options="vm.options"
           options="{ skipPage: true, serverSort: true, pagination: true, singleSelect: true, pageList: [10,20,30,50,100], defaultPageSize: 10 }"
           skip-page="false"
           server-sort="false"
           pagination="false"
           single-select="true"
           page-list="[10, 30, 50, 100]"
           default-page-size="10"
           server-load="false"
           class="table table-bordered table-striped table-hover text-center">
        <tr ng-repeat="$row in $rows" ng-dblclick="vm.show();">
            <td table-column header="全选" field="select" sort="false" checkbox="true" sort-order="asc" style="width:30px;"></td>
            <td table-column header="序号" field="numbers" sort="false" rownumbers="true" sort-order="asc" hide="false" style="width:40px;"></td>
            <td table-column header="姓名" field="name" sort="true" checkbox="false" sort-order="asc">{{$row.name}}</td>
            <td table-column header="年龄" field="age" sort="true" checkbox="false" sort-order="desc">{{$row.age}}</td>
            <td table-column header="邮箱" field="email" sort="false" checkbox="false" sort-order="desc">{{$row.email}}</td>
            <td table-column header="操作" field="email" sort="false" checkbox="false" sort-order="desc">
                <button ng-click="show();">详情</button>
            </td>
        </tr>
    </table>

</div>


<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="../ourpalm-table.js"></script>
<script>

    angular
        .module('app', ['ourpalm-table'])
        .controller('DemoController', function ($timeout, OurpalmTable, $scope) {
            var vm = this;

            $scope.show = function () {
                console.info('scope.show');
            };

            vm.show = function () {
                console.info('vm.show');
            };

            vm.table = new OurpalmTable({
                cacheKey: 'table01',
                cachePageSize: true,
                cacheColumns: true,
                skipPage: true,
                serverSort: false,
                pagination: true,
                serverLoad: true,
                singleSelect: false,
                pageList: [10, 20, 30],
                defaultPageSize: 10,
                //data: rows, //内存加载数据
                loadData: function (table, callback) {
                    var options = table.getOptions();

                    var i = (options.currentPage - 1) * options.pageSize + 1;
                    var size = i + options.pageSize;
                    size = size > 86 ? 86 : size;
                    //构造服务器假数据
                    var rows = [];
                    for (; i < size; i++) {
                        rows.push({
                            name: `zhangsan${i}`,
                            age: i,
                            email: `zhangsan${i}@163.com`
                        });
                    }

                    $timeout(function () {
                        callback({
                            total: 86,
                            rows: rows
                        });
                    }, 300);
                }
            });

            vm.options = {
                skipPage: false,
                serverSort: false,
                pagination: false,
                singleSelect: true,
                pageList: [10, 20, 30, 50, 100],
                defaultPageSize: 100
            };

//            $timeout(function () {
//                console.info('getDisplayedColumns', vm.table.getDisplayedColumns());
//                console.info('getDisplayedRows', vm.table.getDisplayedRows());
//                console.info('getOptions', vm.table.getOptions());
//                console.info('getSelectedRows', vm.table.getSelectedRows());
//                console.info('getSortColumns', vm.table.getSortColumns());
//            }, 5000);
        });

    angular.bootstrap(document, ['app']);

</script>

</body>
</html>
